<template>
  <div>
    <!-- 顶部导航 -->
    <div class="van-nav">
      <div class="van-tab-img">
        <img
          src="https://img10.360buyimg.com/img/s750x90_jfs/t1/165006/23/12215/28086/604b2dafE208f5975/4219d6109472ca88.png.webp"
          alt=""
        />
      </div>
      <van-tabs
        v-model="active"
        swipeable
        @click="onClick"
        background="transparent"
      >
        <van-tab
          v-for="(item, index) in liveTitle"
          :key="index"
          :title="item"
          title-style="color:#fff"
        >
        </van-tab>
      </van-tabs>
    </div>
    <!-- 页面主体 关注 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 0">
      <div class="wx_wrap">
        <div class="guide-login">
          <div class="tip">登录后可查看你关注主播的动态哦!</div>
          <div class="btn">去登录</div>
        </div>
      </div>
      <!-- 底部footer -->
      <div class="footer">
        <div class="jd_footer"></div>
      </div>
    </div>
    <!-- 页面主体 推荐 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 1">
      <div class="live-page_list">
        <!-- banner -->
        <div class="banner">
          <div class="banner_img"></div>
        </div>
        <!-- 轮播图 -->
        <div class="carousel">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img
                  src="https://img10.360buyimg.com/img/s480x480_jfs/t1/152496/18/13741/218981/5ff5b890E2d99503a/ed9e54b234629d57.png!cc_2x2.webp"
                  alt="1"
                />
              </div>
              <div class="swiper-slide">
                <img
                  src="https://img10.360buyimg.com/img/s480x480_jfs/t1/167908/35/16774/252554/606e61f2Eb7e54866/f8d174eaf6cbe32b.png!cc_2x2.webp"
                  alt="2"
                />
              </div>
              <div class="swiper-slide">
                <img
                  src="https://img10.360buyimg.com/img/s480x480_jfs/t1/160595/4/16949/160473/606e9f47E8ddb85b1/555ba8437afc8120.jpg!cc_2x2!q70.dpg"
                  alt="3"
                />
              </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
        <!-- 走进原产地 -->
        <div class="industry">
          <div class="industry_head">
            <div class="industry_head_title">走进原产地</div>
            <div class="industry_head_calendar">
              <div class="industry_head_node">
                <div class="item">今天</div>
                <div class="item">鱿鱼·天妇罗</div>
                <div class="arrow"></div>
              </div>
            </div>
          </div>
          <div class="industry_content">
            <div class="industry_content_cover">
              <div class="img">
                <img
                  src="https://img10.360buyimg.com/img/s240x240_jfs/t1/176048/2/1666/620955/60670d2bE38306b27/f7f926a83275286c.png.webp"
                  alt=""
                />
              </div>
              <div class="tag">
                <span>预告</span>
              </div>
            </div>
            <div class="industry_content_detail">
              <div class="industry_content_title">鱿鱼·天妇罗</div>
              <div class="industry_content_anthor">
                <div class="img">
                  <img
                    src="https://m.360buyimg.com/ceco/s16x16_jfs/t1/140698/19/1327/100179/5ef09425Ea4c687d3/c70666a6e2d1c9dc.jpg!q70.dpg"
                    alt=""
                  />
                </div>
                <span class="msg"> 口感劲道，营养美味，不定时秒杀。 </span>
              </div>
              <div class="industry_content_price">
                <span class="item">
                  <span class="min">直播秒杀价</span>
                  <span class="min2">￥</span>
                  <span class="max">7.9</span>
                  <span class="tag">
                    <span class="pre">20:00开抢</span>
                  </span>
                </span>
              </div>
              <div class="industry_content_pgprice">拼购价 ￥26.9</div>
              <div class="industry_content_btn">立即预约</div>
            </div>
          </div>
        </div>
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>

        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 产地好货 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 2">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 食品生鲜 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 3">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 服饰穿搭 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 4">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 母婴美妆 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 5">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 家居日用 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 6">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
    <!-- 页面主体 3C家电 -->
    <div :class="{ 'live-page': true }" v-show="isShow === 7">
      <div class="live-page_list">
        <!-- 正在直播 -->
        <div class="liveing">
          <van-card
            tag="直播中"
            desc="关注分享有礼1"
            v-for="(item, index) in tagLivingData"
            :key="index"
          >
            <template #title>
              <h3 class="living-tit">{{ item.proTit }}</h3>
            </template>
            <template #thumb>
              <img :src="item.liveImg" alt="" />
            </template>
            <template #tags>
              <van-tag plain type="danger" class="liveing_skus">
                <div class="liveing_sku">
                  <div class="liveing_img">
                    <img :src="item.proImg1" alt="" />
                  </div>
                  <span class="liveing_p">￥10</span>
                </div>
                <div class="liveing_sku liveing_sku2">
                  <div class="liveing_img">
                    <img :src="item.proImg2" alt="" />
                  </div>
                  <span class="liveing_p">￥1</span>
                </div>
              </van-tag>
            </template>
          </van-card>
        </div>
        <!-- 精彩回放 -->
        <div class="header">
          <span class="record_icon"></span>
          <span class="title">精彩回放</span>
        </div>
        <div class="records-wrap">
          <div class="record" v-for="(item, index) in tagLiveData" :key="index">
            <div class="live-item">
              <div class="record_img">
                <div class="live_img">
                  <div class="img">
                    <img :src="item.livedImg" alt="" />
                  </div>
                </div>
                <div class="live_mask"></div>
                <div class="live_tag">
                  <div class="tag">回放</div>
                  <div class="number">16人</div>
                </div>
                <div class="live_anchor">
                  <div class="live_header"></div>
                  <div class="live_aname">{{ item.personName }}</div>
                </div>
              </div>
              <div class="record_title">{{ item.livedTit }}</div>
            </div>
          </div>
        </div>
        <!-- 底部footer -->
        <div class="footer">
          <div class="jd_footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入滑动导航组件
import Vue from "vue";
import { Tab, Tabs } from "vant";
// import { Toast } from 'vant';
// 导入swiper
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
// 导入card组件
import { Card } from "vant";
import { Tag } from "vant";
import axios from "axios";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Card);
Vue.use(Tag);
// Vue.use(Toast);

export default {
  data() {
    return {
      color: "#fff",
      isShow: 1,
      active: 1,
      liveTitle: [
        "关注",
        "推荐",
        "产地好货",
        "食品生鲜",
        "服饰穿搭",
        "母婴美妆",
        "家居日用",
        "3C家电",
      ],
      livingData: [],
      liveData: [],
      // 标签对应正在直播的数据
      tagLivingData: [],

      // 标签对应回放的数据
      tagLiveData: [],
    };
  },
  created() {
    axios
      .get(
        "https://www.fastmock.site/mock/2a54ab2df8275c99628c5f156994883e/jx_live/live/data"
      )
      .then((ret) => {
        this.livingData = ret.livingData;
        this.liveData = ret.liveData;
        this.livingData.map((item) => {
          if (item.liveId === "0001") {
            this.tagLivingData.push(item);
          }
        });
        this.liveData.map((item) => {
          if (item.livedId === "0001") {
            this.tagLiveData.push(item);
          }
        });
      });
  },
  // 轮播图
  mounted() {
    new Swiper(".swiper-container", {
      slidesPerView: 2,
      spaceBetween: -10,
      autoplay: true,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
  // 导航栏点击事件
  methods: {
    onClick(title) {
      this.tagLivingData = [];
      this.tagLiveData = [];
      this.isShow = title;
      title = "000" + title;
      // 遍历直播数据，获取标签对应的直播数据
      this.livingData.map((item) => {
        if (item.liveId === title) {
          this.tagLivingData.push(item);
        }
      });
      // 遍历直播数据，获取标签对应的回放数据
      this.liveData.map((item) => {
        if (item.livedId === title) {
          this.tagLiveData.push(item);
        }
      });
    },
  },
};
</script>

<style>
.van-tabs {
  height: 60px;
  z-index: 200;
  padding-bottom: 5px;
  font-size: 14px;
  position: absolute;
  top: 0;
}
.van-tabs__nav {
  background-color: transparent;
}
.van-tab {
  color: #fff;
}

.van-tabs__wrap--scrollable .van-tab {
  padding: 0 15px;
}
.van-tab--active {
  font-size: 18px;
  font-weight: 600;
}
.van-tabs__line {
  width: 20px;
  height: 4px;
  background-color: rgb(247, 231, 7);
}
</style>

<style scoped>
/* 顶部导航样式 */
.van-nav {
  position: fixed;
  top: 0;
  height: 60px;
  z-index: 9999;
  width: 100%;
}
.van-tab-img {
  height: 46px;
  position: absolute;
  top: 0;
}
.van-tab-img img {
  width: 100%;
  height: auto;
}

/* 关注页面主体 */
.wx_wrap {
  min-height: 175px;
}
.guide-login {
  margin-top: 200px;
}
.guide-login .tip {
  font-size: 14px;
  color: #999;
  line-height: 14px;
  margin-bottom: 20px;
}
.guide-login .btn {
  width: 94px;
  height: 30px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  border-radius: 40px;
  background-image: linear-gradient(270deg, #ff4142, #ff4b2b);
  align-items: center;
  margin: auto;
}

/* 页面主体 */
.live-page {
  z-index: 100;
  width: 100vw;
  overflow: hidden;
}
.live-page_list {
  position: relative;
}
/* banner */
.banner {
  position: relative;
}
.banner_img {
  height: 115px;
  width: 100%;
  background-image: url("https://img10.360buyimg.com/img/s750x232_jfs/t1/170084/38/12107/69558/604b2dbbE1322a676/91764248246e1678.png.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 0 0 10px 10px;
  margin-top: 44px;
  position: absolute;
  top: -60px;
}
/* 轮播图样式 */
.carousel {
  width: 100%;
  height: 210px;
  position: relative;
  padding: 10px 0 12px;
  margin-bottom: 12px;
  margin-top: 60px;
}
.swiper-container {
  width: 100%;
  height: 210px;
  padding-left: 10px;
  overflow: hidden;
  position: relative;
}
.swiper-wrapper {
  width: 210px;
  height: 210px;
}
.swiper-slide {
  width: 210px !important;
  height: 210px;
  display: flex;
  align-items: center;
  transform: scale(0.8);
}
.swiper-slide img {
  width: 100%;
  border-radius: 10px;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

/* 走进原产地 */
.industry {
  width: 355px;
  height: 180px;
  margin: 3px 10px 0 10px;
  position: relative;
  background: url("https://img10.360buyimg.com/img/s710x360_jfs/t1/134030/27/9571/151740/5f58c2c9E9e63a2ff/ef5432b660d06ef6.png.webp")
    center center / cover no-repeat;
}
.industry_head {
  display: flex;
  padding: 13px 0 0;
}
.industry_head_title {
  margin-left: 15px;
  width: 48px;
  background: url(https://img12.360buyimg.com/img/s30x30_jfs/t1/115468/4/17483/519/5f58c2d4Ed52a81a5/41193db17cad88da.png)
    no-repeat 0 0;
  background-size: 15px 15px;
  text-indent: 16px;
  line-height: 18px;
  font-size: 15px;
  color: #000;
  position: relative;
  padding-right: 20px;
  font-weight: 700;
}
.industry_head_title:after {
  content: "";
  background: url(https://img12.360buyimg.com/img/s27x27_jfs/t1/134218/36/9532/516/5f58c2deEc925753a/8bf161abfcbf5d4e.png)
    50% no-repeat;
  background-size: cover;
  width: 13px;
  height: 13px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.industry_head_calendar {
  display: flex;
  margin: 0 auto;
  padding: 0 5px;
}
.industry_head_node {
  font-weight: 700;
  text-align: center;
  position: relative;
}
.industry_head_node .item {
  color: #2d8332;
}
.industry_head_node .item:first-child {
  line-height: 14px;
  font-size: 14px;
  font-weight: 700;
}
.industry_head_node .item:nth-child(2) {
  margin-top: 3px;
  line-height: 12px;
  font-size: 12px;
}
.industry_head_node .arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-color: #2b8e31;
  width: 15px;
  height: 2px;
}
.industry_content {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 335px;
  height: 115px;
  background-color: #fff;
  border-radius: 9px;
  padding: 5px;
  display: flex;
}
.industry_content_cover {
  position: relative;
}
.industry_content_cover .img {
  height: 115px;
  width: 115px;
  position: relative;
}
.industry_content_cover img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
}
.industry_content_cover .tag {
  height: 17px;
  border-radius: 9px 9px 9px 0;
  line-height: 19px;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff9b09;
}
.industry_content_detail {
  padding: 6px 5px 0 10px;
  overflow: hidden;
  position: relative;
}
.industry_content_title {
  height: 16px;
  width: 205px;
  color: #333;
  font-weight: 700;
  line-height: 16px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
  text-align: left;
}
.industry_content_anthor {
  margin-top: 8px;
  display: flex;
  position: relative;
}
.industry_content_anthor .img {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.industry_content_anthor img {
  width: 100%;
  height: 100%;
}
.industry_content_anthor .msg {
  margin-left: 5px;
  height: 24px;
  background-color: #f2f2f2;
  line-height: 24px;
  font-size: 10px;
  color: #999;
  text-indent: 10px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.industry_content_price {
  margin-top: 4px;
}
.industry_content_price .item {
  color: #f81818;
  font-size: 12px;
}
.industry_content_price .min2 {
  font-size: 13px;
  font-weight: 700;
  margin-left: 2px;
}
.industry_content_price .max {
  font-size: 18px;
  font-weight: 700;
  margin-left: 2px;
}
.industry_content_price .tag {
  font-size: 8px;
  margin-left: 5px;
  position: relative;
  top: -2px;
}
.industry_content_price .pre {
  background: rgba(255, 148, 8, 0.1);
  padding: 1px 3px;
  color: #ff9408;
}
.industry_content_pgprice {
  color: #999;
  font-size: 12px;
  position: absolute;
  left: 10px;
  bottom: 5px;
}
.industry_content_btn {
  width: 78px;
  height: 25px;
  border-radius: 12px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: 10px;
  bottom: 3px;
  background: linear-gradient(270deg, #ff6e00, #ff9b09);
  box-shadow: 0 3px 6px 0 rgb(255 141 45 / 20%);
}

/* 正在直播 */
.van-card {
  margin: 50px 10px 0;
  padding: 0;
  height: 180px;
  position: relative;
  border-radius: 9px;
}
.van-card__header {
  width: 375px;
  overflow: hidden;
}
.van-card__thumb {
  width: 180px;
  height: 180px;
}
.van-card__thumb img {
  width: 100%;
}
.living-tit {
  text-align: left;
  font-size: 16px;
}
.liveing_skus {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.liveing_sku {
  width: 75px;
  height: 75px;
  position: relative;
  display: inline-block;
  border-radius: 9px;
}
.liveing_sku2 {
  margin-left: 5px;
}
.liveing_img {
  position: relative;
}
.liveing_sku img {
  width: 100%;
  border-radius: 9px;
}
.van-tag--danger.van-tag--plain {
  color: #fff;
  font-weight: 700;
}
.van-card__title {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  margin: 15px 0 5px;
  text-align: left;
}
.van-card__desc {
  color: #999;
  font-size: 12px;
  text-align: left;
}
.liveing_p {
  position: absolute;
  bottom: 0;
  left: 28px;
}

/* 精彩回放 */
.records-wrap {
  overflow: hidden;
}
.record {
  float: left;
  padding: 0 7px;
  margin-bottom: 10px;
  border-radius: 9px;
  position: relative;
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 8%);
  background: #fff;
  overflow: hidden;
  z-index: 1;
  vertical-align: top;
}
.header {
  height: 36px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 2px;
  line-height: 34px;
  display: flex;
  justify-content: center;
}
.header .record_icon {
  display: inline-block;
  width: 38px;
  height: 36px;
  background: url(https://img11.360buyimg.com/jdphoto/s76x73_jfs/t1/69851/32/9371/7830/5d70b92dEd62a5e62/c3361ae116ecfa3b.png)
    no-repeat 50%;
  background-size: contain;
}
.header .title {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: 700;
}
.live-item {
  display: inline-block;
  width: 172px;
  margin-bottom: 10px;
  border-radius: 9px;
  position: relative;

  background: #fff;
  overflow: hidden;
  z-index: 1;
  vertical-align: top;
}

.record_img {
  width: 172px;
  height: 172px;
  position: relative;
}
.live_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 9px;
}
.live_img .img {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.live_img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.live_mask {
  height: 45px;
  width: 100%;
  border-radius: 0 0 9px 9px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.live_tag {
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 4px 0 rgba(0 0 0 / 5%);
  position: absolute;
  left: 0;
  top: 0;
}
.live_tag .tag {
  display: inline-block;
  height: 100%;
  width: auto;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 9px 9px 9px 0;
  padding: 0 5px;
  background-image: linear-gradient(90deg, #ff3156, #ff718e);
}
.live_tag .number {
  display: inline-block;
  padding: 0 5px 0 4px;
  opacity: 0.8;
}
.live_anchor {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  height: 30px;
  position: absolute;
  left: 0;
  bottom: 0px;
  border-radius: 0 0 9px 9px;
}
.live_anchor .live_head {
  widows: 20px;
  border-radius: 45px;
  display: inline-block;
  background: url("https://m.360buyimg.com//popshop/s80x80_jfs/t1/59485/3/550/51066/5cebb0abEdd39f8fd/9a38f19dd5ec57e6.png.webp");
  background-size: cover;
}
.live_aname {
  width: 135px;
  display: inline-block;
  font-size: 12px;
  line-height: 30px;
  margin-left: 5px;
  color: #fff;
  overflow: hidden;
}
.record_title {
  width: 100%;
  height: 40px;
  border-radius: 9px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 40px;
  text-align: center;
  padding: 0 5px;
  box-sizing: border-box;
}

/* 底部footer */
.footer {
  margin: 25px 0 75px;
}
.jd_footer {
  width: 180px;
  height: 24px;
  margin: 0 auto;
  background-image: url(//img12.360buyimg.com/img/s360x48_jfs/t1/158691/32/15367/13406/605bf58eE67b71594/1baecef7fc307d1d.png.webp);
  background-size: 100%;
}
</style>